<template>
  <div>
    <div class="searchBox">
      <input type="search" class="search" placeholder="请输入歌名或者人名" name="inp" v-model="message">
      <button class="searchBtn" @click="search(message)">搜索</button>
    </div>
    <son-search :id="contentList" @sind="getId"></son-search>
  </div>
</template>

<script>
  //引入子组件
  import sonSearch from './sonSearch.vue'
  export default{
    components: {
      sonSearch,
    },
    data(){
      return {
        message: '',
        contentList: '',
        fatherId: ''
      }
    },
    methods: {
      search(message){
        message = message.trim();
//        判断用户输入是否为空值
        if (!message) {
          alert('不能为空');
          return;
        }
//        判断用户输入是否带有标点符号及特殊字符
        if (message) {
          //var re = /^[\u4e00-\u9fa5a-z]+$/gi;//只能输入汉字和英文字母
          //var re = /^[\d|A-z|\u4E00-\u9FFF]+$/gi;//只能输入简繁中文、数字、字母
          var re = /[`~!！@#$%^&*()_+<>?:"{}《》，。,.\/;'[\]]+/ig; //匹配所有的特殊符号
          if (re.test(message)) {
            alert("不能输入特殊字符,请重新输入");
            return;
          } else {
            console.log("验证通过");
          }
        }
        this.contentList = message;
//        后台接口
//        var url = 'http://route.showapi.com/213-1?showapi_appid=37413&showapi_sign=b7c3e87eb6354b7f93d93bf0859d6361&keyword='+message+'&page='+this.page;
//        this.$http.get(url).then(function(response){
//          var obj = response.bodyText;
//           this.contentList = JSON.parse(obj).showapi_res_body.pagebean.contentlist;
        this.message = '';
//        })
      },
//      获取到子元素传过来的值
      getId(input){
        this.fatherId = input;
      }
    },
    watch: {
//      监听数据，如果子组件将值传过来，则将值传给App.vue
      fatherId: function () {
        console.log(this.fatherId);
        this.$emit('sinds', this.fatherId);
      }
    }
  }
</script>

<style scoped>
  .searchBox {
    width: 100%;
    height: 60px;
    margin: 5px 0;
    padding: 3px 60px 0 0;
  }

  .search {
    float: left;
    width: 100%;
    border: 1px solid #3388FF;
    border-right: 0;
  }

  .searchBtn {
    float: right;
    width: 60px;
    margin-right: -60px;
    height: 35px;
    border-radius: 5px;
    background-color: #3388FF;
    vertical-align: bottom;
    color: white;
    font-size: 16px;
  }
</style>
